<!doctype html>
<html>
    <head>
        <title>HT for Web 矢量手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 矢量手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a><ul><li><a href="#ref_vector">矢量</a></li><li><a href="#ref_purpose">用途</a></li><li><a href="#ref_characteristic">特点</a></li></ul></li><li><a href="#ref_format">格式</a><ul><li><a href="#ref_whole">整体属性</a></li><li><a href="#ref_comp">组件属性</a></li><li><a href="#ref_type">组件类型</a><ul><li><a href="#ref_basic">基本类型</a></li><li><a href="#ref_shape">多边形</a></li><li><a href="#ref_border">边框</a></li><li><a href="#ref_text">文本</a></li><li><a href="#ref_image">图片</a></li><li><a href="#ref_piechart">饼图</a></li><li><a href="#ref_columnchart">柱状图</a></li><li><a href="#ref_stackedcolumnchart">堆栈柱状图</a></li><li><a href="#ref_percentagecolumnchart">百分比柱状图</a></li><li><a href="#ref_linechart">曲线图</a></li><li><a href="#ref_custom">自定义</a>    </li><li><a href="#ref_svgpath">SVGPath</a></li></ul></li><li><a href="#ref_binding">数据绑定</a></li></ul></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<div id="ref_vector"></div>

<h3>矢量</h3>

<p><a href="http://en.wikipedia.org/wiki/Vector_graphics">矢量</a>在<code>HT for Web</code>中是矢量图形的简称，常见的<code>png</code>和<code>jpg</code>这类的栅格位图，
通过存储每个像素的颜色信息来描述图形，这种方式的图片在拉伸放大或缩小时会出现图形模糊，线条变粗出现锯齿等问题。
而矢量图片通过点、线和多边形来描述图形，因此在无限放大和缩小图片的情况下依然能保持一致的精确度。</p>

<p><img src=""></p>

<div id="ref_purpose"></div>

<h3>用途</h3>

<p>在<code>HT for Web</code>中所有能用栅格位图的地方都可用矢量图形替代，例如<code>GraphView</code>组件上的图元图片，<code>TreeView</code>和<code>TableView</code>上的图标等，
甚至整个<code>HT</code>框架做出来的系统界面可以实现全矢量化，这样<code>GraphView</code>组件上的图元缩放都不会失真，并且不再需要为<code>Retina</code>显示屏提供不同尺寸的图片，
在<a href="http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html">devicePixelRatio</a>多样化的移动时代，
要实现完美的跨平台，矢量可能是的最低成本的解决方案。</p>

<div id="ref_characteristic"></div>

<h3>特点</h3>

<ul><li>格式简洁：采用<a href="http://en.wikipedia.org/wiki/JSON">JSON</a>格式描述矢量图形，易读且易编写</li><li>数据绑定：矢量元素的颜色，尺寸、位置和文字内容等所有参数，均可<code>Data</code>进行数据属性动态绑定</li><li>特效丰富：可对矢量改变位置尺寸，旋转角度，透明度，设置阴影，以及任何自定义形状裁剪等效果</li><li>类型丰富：除点、线和多边形外等基础图形外，还提供了文字、图片、饼图，柱状图和曲线图等类型</li><li>无限嵌套：矢量图形可以无限嵌套组合，并且每个部件还可以独立控制旋转，拉伸，透明和阴影等参数</li><li>编辑工具：可视化矢量编辑工具，解决手写<code>JSON</code>代码不直观不易修改问题，可导入导出<code>JSON</code>格式数据</li></ul>

<hr/>

<div id="ref_format"></div>

<h2>格式</h2>

<div id="ref_whole"></div>

<h3>整体属性</h3>

<p>矢量采用<code>JSON</code>格式描述，使用方式和普通的栅格位图一致，通过<code>ht.Default.setImage(&#39;hightopo&#39;, jsonObject)</code>进行注册，
使用是将相应图片注册名设置到数据模型即可，如<code>node.setImage(&#39;hightopo&#39;)</code>和<code>node.setIcon(&#39;hightopo&#39;)</code>等。</p>

<p>矢量<code>json</code>描述必需包含<code>width</code>、<code>height</code>和<code>comps</code>参数信息：</p>

<ul><li><code>width</code>矢量图形的宽度</li><li><code>height</code>矢量图形的高度</li><li><code>comps</code>矢量图形的组件<code>Array</code>数组，每个数组对象为一个独立的<a href="#ref_type">组件类型</a>，数组的顺序为组件绘制先后顺序</li></ul>

<p>同时可设置以下可选参数信息：</p>

<ul><li><code>visible</code>是否可见，默认为<code>true</code></li><li><code>opacity</code>透明度，默认为<code>1</code>，可取值范围<code>0~1</code></li><li><code>color</code>染色颜色，设置上该颜色后矢量内部绘制内容将会融合该染色值</li><li><code>clip</code>用于裁剪绘制区域，可设置两种类型：<ul><li><code>boolean</code>类型，控制绘制时超出<code>width</code>和<code>height</code>区域的内容是否被裁剪，默认为<code>false</code>不裁剪</li><li><code>function</code>类型，可利用<code>canvas</code>画笔绘制，实现自定义裁剪任意形状的效果</li></ul></li></ul>

<p>以下例子定义了一个名为<code>sunrise</code>的矢量图形，宽度<code>220</code>，高度<code>150</code>，<code>comps</code>定义了三个<code>type: shape</code>类型组件。</p>

<p><iframe src="examples/example_sunrise.html" style="height:200px"></iframe></p>

<pre><code>ht.Default.setImage(&#39;sunrise&#39;, {
    width: 220,
    height: 150,
    comps: [
        {
            type: &#39;shape&#39;,
            points: [10, 110, 10, 10, 210, 10, 210, 110],
            segments: [1, 4],
            background: &#39;yellow&#39;,
            gradient: &#39;linear.north&#39;
        },
        {
            type: &#39;shape&#39;,
            shadow: true,
            points: [30, 10, 30, 110, 30, 60, 90, 60, 90, 10,
                90, 110, 130, 10, 190, 10, 160, 10, 160, 110
            ],
            segments: [
                1, 2, 1, 2, 1, 2, 1, 2, 1, 2
            ],
            borderWidth: 10,
            borderColor: &#39;#1ABC9C&#39;,
            borderCap: &#39;round&#39;
        },
        {
            type: &#39;shape&#39;,
            points: [10, 130, 35, 120, 60, 130, 85, 140,
                110, 130, 135, 120, 160, 130, 185, 140, 210, 130
            ],
            segments: [
                1, 3, 3, 3, 3
            ],
            borderWidth: 2,
            borderColor: &#39;#3498DB&#39;
        }
    ]
});

var node = new ht.Node();
node.setPosition(160, 110);
node.setImage(&#39;sunrise&#39;);
dataModel.add(node);</code></pre>

<p>以下的代码片段展示的是嵌套矢量图形的用法，在定义<code>group-sunrise</code>矢量时，通过<code>type: &#39;image&#39;</code>的图片类型，
指向了<code>name: &#39;sunrise&#39;</code>的以定义矢量图形，该例子分别定义了四个嵌套的<code>sunrise</code>矢量，设置了<code>clip: true</code>，
这样右上角的<code>sunrise</code>矢量虽然旋转后超出了宽高设置的区域，但超出的绘制内容会被裁剪掉。</p>

<pre><code>ht.Default.setImage(&#39;group-sunrise&#39;, {
    width: 240,
    height: 160,
    clip: true,
    color: &#39;red&#39;,
    comps: [
        {
            type: &#39;image&#39;,
            name: &#39;sunrise&#39;,
            rect: [0, 0, 120, 80],
            opacity: 0.3
        },
        {
            type: &#39;image&#39;,
            name: &#39;sunrise&#39;,
            rect: [120, 0, 120, 80],
            rotation: Math.PI / 4
        },
        {
            type: &#39;image&#39;,
            name: &#39;sunrise&#39;,
            rect: [0, 80, 120, 80],
            shadow: true
        },
        {
            type: &#39;image&#39;,
            name: &#39;sunrise&#39;,
            rect: [120, 80, 120, 80]
        }
    ]
});</code></pre>

<p><iframe src="examples/example_cloud.html" style="height:225px"></iframe></p>

<p>示例定义了一个<code>cloud</code>的多边形云图效果，接下来定义的<code>cloud-rect</code>和<code>cloud-oval</code>分别嵌套复用了<code>cloud</code>的云图。
采用了<code>clip</code>为<code>true</code>进行矩形裁剪解决了文字内容超出宽高区域的问题，通过自定义<code>clip</code>函数达到裁剪出圆形效果。</p>

<pre><code>ht.Default.setImage(&#39;cloud-oval&#39;, {
    width: 300,
    height: 300,
    clip: function(g, width, height, data) {
        g.beginPath();
        g.arc(width / 2, height / 2, Math.min(width, height) * 0.42, 0, Math.PI * 2, true);
        g.clip();
    },
    comps: [
        {
            type: &#39;rect&#39;,                            
            rect: [0, 0, 300, 300],
            background: &#39;#3498DB&#39;
        },                
        {
            type: &#39;image&#39;,
            name: &#39;cloud&#39;,
            rect: [0, 0, 300, 300]
        },                         
        {
            type: &#39;text&#39;,
            text: new Date(),
            rect: [0, 120, 300, 100],
            color: &#39;#34495E&#39;,
            font: &#39;bold 18px Arial&#39;,
            align: &#39;center&#39;
        }
    ]
}); </code></pre>

<div id="ref_comp"></div>

<h3>组件属性</h3>

<p>组件的属性一般根据组件类型的不同而设置，而阴影、透明度和旋转等属性是所有类型都具备可设置的参数。</p>

<ul><li><code>type</code>组件类型，目前支持类型如下：<ul><li><code>rect</code> <a href="#ref_basic">矩形</a></li><li><code>circle</code> <a href="#ref_basic">圆形</a></li><li><code>oval</code> <a href="#ref_basic">椭圆形</a></li><li><code>roundRect</code> <a href="#ref_basic">四周圆角矩形</a></li><li><code>star</code> <a href="#ref_basic">星形形</a></li><li><code>triangle</code> <a href="#ref_basic">三角形</a></li><li><code>hexagon</code> <a href="#ref_basic">六边形</a></li><li><code>pentagon</code> <a href="#ref_basic">五边形</a></li><li><code>diamond</code> <a href="#ref_basic">钻石形</a></li><li><code>rightTriangle</code> <a href="#ref_basic">直角三角形</a></li><li><code>parallelogram</code> <a href="#ref_basic">平行四边形</a></li><li><code>trapezoid</code> <a href="#ref_basic">梯形</a> </li><li><code>polygon</code> <a href="#ref_basic">多边形</a> </li><li><code>arc</code> <a href="#ref_basic">圆弧形</a> </li><li><code>shape</code> <a href="#ref_shape">多边形</a></li><li><code>text</code> <a href="#ref_text">文本</a></li><li><code>image</code> <a href="#ref_image">图片</a></li><li><code>pieChart</code> <a href="#ref_piechart">饼图</a></li><li><code>columnChart</code> <a href="#ref_columnchart">柱状图</a></li><li><code>stackedColumnChart</code> <a href="#ref_stackedcolumnchart">堆栈柱状图</a></li><li><code>percentageColumnChart</code> <a href="#ref_percentagecolumnchart">百分比柱状图</a></li><li><code>lineChart</code> <a href="#ref_linechart">曲线图</a></li><li><a href="#ref_custom">自定义类型</a></li><li><code>SVGPath</code> <a href="#ref_svgpath">SVGPath</a></li></ul></li><li><code>opacity</code>透明度，取值范围<code>0</code>~<code>1</code>，<code>0</code>则完全透明，<code>1</code>则保持原本颜色</li><li><code>rotation</code>旋转弧度，以组件的中心进行顺时针旋转</li><li><code>shadow</code>是否显示阴影，默认值为<code>false</code></li><li><code>shadowOffsetX</code>阴影的水平偏移量，默认值为<code>3</code></li><li><code>shadowOffsetY</code>阴影的垂直偏移量，默认值为<code>3</code></li><li><code>shadowBlur</code>阴影的模糊级别</li><li><code>shadowColor</code>阴影的颜色</li><li><code>visible</code>是否可见，默认值为<code>true</code></li><li><code>relative</code>默认为<code>false</code>采用绝对值，若为<code>true</code>则<code>rect</code>参数为相对于矢量的宽高比</li><li><code>rect</code>指定组件绘制在矢量中的矩形边界，需结合<code>relative</code>参数，有两种格式类型：<ul><li><code>[x, y, width, height]</code>四个参数方式，分别代表左上角坐标<code>x</code>和<code>y</code>，以及宽高<code>width</code>和<code>height</code></li><li><code>[position, width, height]</code>三个参数方式，<a href="../beginners/ht-beginners-guide.html#ref_styleposition">position</a>位置类型，以及宽高<code>width</code>和<code>height</code></li></ul></li><li><code>offsetX</code>对<code>rect</code>定义的矩形区域再进行水平方向的偏移，该参数采用绝对值，不考虑<code>relative</code>参数</li><li><code>offsetY</code>对<code>rect</code>定义的矩形区域再进行垂直方向的偏移，该参数采用绝对值，不考虑<code>relative</code>参数</li></ul>

<p>以下例子分别对云图矢量设置了透明度<code>0.5</code>，旋转了<code>Math.PI/4</code>弧度，设置了阴影，以及将三种参数组合的效果。</p>

<p><iframe src="examples/example_comp.html" style="height:225px"></iframe></p>

<pre><code>ht.Default.setImage(&#39;cloud-all&#39;, {
    width: 300,
    height: 300,
    comps: [
        {
            type: &#39;shape&#39;,
            points: points,
            segments: segments,
            background: &#39;#d6f0fd&#39;,
            gradientColor: &#39;#A6f0fd&#39;,
            gradient: &#39;linear.north&#39;,
            opacity: 0.5,
            rotation: Math.PI/4,
            shadow: true,
            shadowColor: &#39;#E74C3C&#39;,
            shadowBlur: 12,
            shadowOffsetX: 6,
            shadowOffsetY: 6
        }                       
    ]
}); </code></pre>

<p>除了<code>shape</code>类型外其他类型组件都需要指定<code>rect</code>参数，因为<code>shape</code>自身通过<code>points</code>和<code>segments</code>信息已经能确定自身组件位置，
但<code>shape</code>类型依然可以设置<code>rect</code>参数，相当于将<code>shape</code>压缩或拉伸到填充入指定的<code>rect</code>区域，以下例子中定义的<code>cloud</code>矢量，
为两个<code>shape</code>构成，第一个<code>shape</code>未指定<code>rect</code>，第二个<code>shape</code>指定的<code>rect</code>将云缩小定位到中心区域，其<code>rect</code>设置时采用了
<code>[17, 0.3, 0.3]</code>的三参数方式，其中<code>17</code>代表中心<a href="../beginners/ht-beginners-guide.html#ref_styleposition">position</a>位置，
<code>0.3</code>代表宽度为矢量宽和高的<code>0.3</code>倍大小。</p>

<p><iframe src="examples/example_rect.html" style="height:225px"></iframe></p>

<div id="ref_type"></div>

<h3>组件类型</h3>

<div id="ref_basic"></div>

<h4>基本类型</h4>

<p>矢量的基本类型与<a href="../beginners/ht-beginners-guide.html#ref_styleshape">style的shape</a>参数是完全一一对应，
只是将<code>style</code>中的名称改成骆驼式命名法去掉了<code>.</code>分隔符。</p>

<p>基本类型：</p>

<ul><li><code>rect</code>矩形</li><li><code>circle</code>圆形</li><li><code>oval</code>椭圆形</li><li><code>roundRect</code>四周圆角矩形</li><li><code>star</code>星形形</li><li><code>triangle</code>三角形</li><li><code>hexagon</code>六边形</li><li><code>pentagon</code>五边形</li><li><code>diamond</code>钻石形</li><li><code>rightTriangle</code>直角三角形</li><li><code>parallelogram</code>平行四边形</li><li><code>trapezoid</code>梯形 </li><li><code>polygon</code>多边形 </li><li><code>arc</code>圆弧形 			</li></ul>

<p>参数属性：</p>

<ul><li><code>borderWidth</code>边框宽度，默认值为<code>0</code>代表不绘制边框</li><li><code>borderColor</code>边框颜色</li><li><code>borderCap</code>边框末端线帽的样式，可选参数为<code>butt|round|square</code>
<img src=""></li><li><code>borderJoin</code>边框当两条线交汇时创建边角的类型，可选参数为<code>bevel|round|miter</code>
<img src=""></li><li><code>borderPattern</code>显示虚线样式，<code>Array</code>类型，例如<code>[5, 5]</code></li><li><code>depth</code>只对<code>rect</code>类型起作用，正值代表凸起，负值代表凹陷，默认值为<code>0</code></li><li><code>background</code>背景填充颜色，为<code>null</code>代表不填充背景</li><li><code>gradient</code>渐近色类型：<ul><li>为空代表不绘制渐近色效果，只用<code>shape.background</code>纯色填充背景。</li><li>支持类型：<code>&#39;linear.southwest&#39;,&#39;linear.southeast&#39;,&#39;linear.northwest&#39;,&#39;linear.northeast&#39;,
&#39;linear.north&#39;,&#39;linear.south&#39;,&#39;linear.west&#39;,&#39;linear.east&#39;,
&#39;radial.center&#39;,&#39;radial.southwest&#39;,&#39;radial.southeast&#39;,&#39;radial.northwest&#39;,&#39;radial.northeast&#39;,
&#39;radial.north&#39;,&#39;radial.south&#39;,&#39;radial.west&#39;,&#39;radial.east&#39;,
&#39;spread.horizontal&#39;,&#39;spread.vertical&#39;,&#39;spread.diagonal&#39;,&#39;spread.antidiagonal&#39;,
&#39;spread.north&#39;,&#39;spread.south&#39;,&#39;spread.west&#39;,&#39;spread.east&#39;</code></li></ul></li><li><code>gradientColor</code>背景渐近颜色 </li><li><code>repeatImage</code>填充重复背景的图片，注意这里的图片不支持矢量</li><li><code>dash</code>是否显示虚线，默认值为<code>false</code> </li><li><code>dashPattern</code>虚线样式，默认值为<code>[16, 16]</code></li><li><code>dashOffset</code>虚线偏移，默认值为<code>0</code></li><li><code>dashColor</code>虚线颜色</li><li><code>dashWidth</code>虚线宽度，默认为空代表采用<code>shape.border.width</code>值 </li><li><code>dash3d</code>虚线是否显示<code>3d</code>效果，默认值为<code>false</code></li><li><code>dash3dColor</code>虚线<code>3d</code>效果颜色，为空采用默认白色，呈现<code>3d</code>效果时连线的中间部分为该颜色</li><li><code>dash3dAccuracy</code>虚线<code>3d</code>效果精确度，该值越小<code>3d</code>渐进效果越好但影响性能，一般情况无需修改 </li><li><code>cornerRadius</code>该参数指定<code>roundRect</code>类型的圆角半径，默认为空系统自动调节，可设置正数值</li><li><code>polygonSide</code>多边形变数，该参数指定<code>polygon</code>类型的变数</li><li><code>arcFrom</code>圆弧形起始弧度，默认值为<code>Math.PI</code></li><li><code>arcTo</code>圆弧形结束弧度，默认值为<code>2*Math.PI</code></li><li><code>arcClose</code>圆弧形是否闭合，默认为<code>true</code></li><li><code>arcOval</code>圆弧形是否为椭圆，默认为<code>false</code></li></ul>

<p><iframe src="examples/example_basic.html" style="height:310px"></iframe></p>

<div id="ref_shape"></div>

<h4>多边形</h4>

<p><code>shape</code>类型，<a href="#ref_basic">基本类型</a>的参数也都适用于多边形，多边形通过<code>points</code>的<code>Array</code>数组指定每个点信息，
<code>points</code>以<code>[x1, y1, x2, y2, x3, y3, ...]</code>的方式存储点坐标。曲线的多边形可通过<code>segments</code>的<code>Array</code>数组来描述，
<code>segment</code>以<code>[1, 2, 1, 3 ...]</code>的方式描述每个线段：</p>

<ul><li>1: <code>moveTo</code>，占用<code>1</code>个点信息，代表一个新路径的起点</li><li>2: <code>lineTo</code>，占用<code>1</code>个点信息，代表从上次最后点连接到该点</li><li>3: <code>quadraticCurveTo</code>，占用<code>2</code>个点信息，第一个点作为曲线控制点，第二个点作为曲线结束点</li><li>4: <code>bezierCurveTo</code>，占用<code>3</code>个点信息，第一和第二个点作为曲线控制点，第三个点作为曲线结束点</li><li>5: <code>closePath</code>，不占用点信息，代表本次路径绘制结束，并闭合到路径的起始点  </li></ul>

<p>对比闭合多边形除了设置<code>segmennts</code>参数外，还可以设置<code>closePath</code>属性：
* <code>closePath</code>获取和设置多边形是否闭合，默认为<code>false</code>，对闭合直线采用这种方式，无需设置<code>segments</code>参数</p>

<p><iframe src="examples/example_shape.html" style="height:180px"></iframe></p>

<pre><code>ht.Default.setImage(&#39;shape&#39;, {
    width: 100,
    height: 50,
    comps: [
        {
            type: &#39;shape&#39;,
            borderWidth: 2,
            borderColor: &#39;#34495E&#39;,
            background: &#39;#40ACFF&#39;,
            gradient: &#39;spread.vertical&#39;,
            gradientColor: &#39;white&#39;,
            points: [5, 25, 70, 25, 70, 5, 95, 25, 70, 45],
            segments: [
                1, // moveTo [5, 25]
                2, // lineTo [70, 25]
                1, // moveTo [70, 5]
                2, // lineTo [95, 25]
                2, // lineTo [70, 45]
                5] // closePath to [70, 5]
        }                          
    ]
});                 </code></pre>

<div id="ref_border"></div>

<h4>边框</h4>

<p><code>border</code>边框类似，用于绘制指定矩形的内边框，该类型的绘制区域不会超出矩形边界</p>

<p><code>color</code>边框颜色
<code>width</code>边框宽度</p>

<div id="ref_text"></div>

<h4>文本</h4>

<p><code>text</code>文本类型，用于呈现数值或名称等描述信息。</p>

<ul><li><code>align</code>文本绘制在矩形区域的水平方向对齐方式，可设置为：<code>left</code>、<code>center</code>或<code>right</code></li><li><code>vAlign</code>文本绘制在矩形区域的垂直方向对齐方式，可设置为：<code>top</code>、<code>middle</code>或<code>bottom</code></li><li><code>color</code>文本颜色</li><li><code>font</code>文本字体</li></ul>

<p><iframe src="examples/example_text.html" style="height:100px"></iframe></p>

<div id="ref_image"></div>

<h4>图片</h4>

<p><code>image</code>图片类型有两种用处，一是可引入传统的栅格位图，达到矢量和传统图片的融合，
二时通过<code>image</code>类型嵌入已定义的矢量，形成无限嵌套效果和可复用的功能，
图片注册详见<a href="../beginners/ht-beginners-guide.html#ref_image">入门手册</a></p>

<ul><li><code>name</code>图片名称，对应通过<code>ht.Default.setImage</code>注册的图片或矢量图形名称。 </li><li><code>color</code>渲染颜色，<code>HT</code>系统会自动采用该颜色对图片内容进行渲染</li><li><code>stretch</code>图片如何绘制在指定矩形区域类型： <ul><li><code>fill</code>图片填充满整个矩形区域，如果图片宽高比例和矩形不一致会导致图片拉伸失真</li><li><code>uniform</code>图片始终保持原始宽高比例不变化，并尽量填充满矩形区域</li><li><code>centerUniform</code>当矩形区域大于图片尺寸时图片以原始大小绘制在中心位置，空间不够时采用<code>uniform</code>的绘制方式</li></ul></li></ul>

<p><iframe src="examples/example_image.html" style="height:300px"></iframe> </p>

<div id="ref_piechart"></div>

<h4>饼图</h4>

<p>饼图类型为<code>pieChart</code>：</p>

<ul><li><code>values</code>：<code>Array</code>类型数组，存储<code>number</code>类型数值</li><li><code>colors</code>：<code>Array</code>类型数组，存储<code>string</code>类型颜色。如果未设置，则系统会使用<code>ht.Color.chart</code>数组的默认颜色</li><li><code>label</code>：是否显示文字信息：<ul><li><code>boolean</code>类型：为<code>true</code>显示<code>value</code>信息，<code>false</code>不显示</li><li><code>function</code>类型：<code>function(value, index, sum, data)</code>，函数返回需要显示的文字<ul><li><code>value</code>：当前数值</li><li><code>index</code>：当前索引</li><li><code>sum</code>：<code>values</code>的总数值</li><li><code>data</code>：当前关联的<code>Data</code>对象</li></ul></li></ul></li><li><code>labelColor</code>：文字颜色</li><li><code>labelFont</code>：文字字体</li><li><code>hollow</code>：<code>boolean</code>类型，决定是否中空即圆环效果，默认为<code>false</code></li><li><code>startAngle</code>：<code>number</code>类型代表起始弧度，默认为<code>0</code></li></ul>

<p><iframe src="examples/example_pie.html" style="height:240px"></iframe></p>

<div id="ref_columnchart"></div>

<h4>柱状图</h4>

<p>柱状图类型为<code>columnChart</code>：</p>

<ul><li><code>label</code>：是否显示文字信息：<ul><li><code>boolean</code>类型：为<code>true</code>显示<code>value</code>信息，<code>false</code>不显示</li><li><code>function</code>类型：<code>function(value, index, serie, data)</code>，函数返回需要显示的文字<ul><li><code>value</code>：当前数值</li><li><code>index</code>：当前索引</li><li><code>serie</code>：当前系列</li><li><code>data</code>：当前关联的<code>Data</code>对象</li></ul></li></ul></li><li><code>labelColor</code>：文字颜色</li><li><code>labelFont</code>：文字字体</li><li><code>series</code>：系列，以<code>Array</code>数组的方式指定每个系列的数值和颜色等信息<ul><li><code>values</code>：<code>Array</code>类型数组，存储<code>number</code>类型数值</li><li><code>colors</code>：<code>Array</code>类型数组，存储<code>string</code>类型颜色</li><li><code>color</code>：颜色值，其优先级低于<code>colors</code></li></ul></li><li><code>minValue</code>：最小值，如果未设置默认为<code>0</code></li><li><code>maxValue</code>：最大值，如果未设置则系统自动计算调整</li></ul>

<p>以下例子为<code>serie</code>只有一组数据的情况，这种情况下一般会设置<code>colors</code>达到不同column不同颜色。
<iframe src="examples/example_columnchart.html" style="height:280px"></iframe></p>

<p>以下例子为<code>serie</code>有多组数据的情况，这种情况下一般会设置<code>color</code>而不设置<code>colors</code>，以达到不同系列不同颜色效果。</p>

<p><iframe src="examples/example_groupcolumnchart.html" style="height:440px"></iframe></p>

<div id="ref_stackedcolumnchart"></div>

<h4>堆栈柱状图</h4>

<p>堆栈柱状图类型为<code>stackedColumnChart</code>：</p>

<ul><li><code>label</code>：是否显示文字信息：<ul><li><code>boolean</code>类型：为<code>true</code>显示<code>value</code>信息，<code>false</code>不显示</li><li><code>function</code>类型：<code>function(value, index, serie, data)</code>，函数返回需要显示的文字<ul><li><code>value</code>：当前数值</li><li><code>index</code>：当前索引</li><li><code>serie</code>：当前系列</li><li><code>data</code>：当前关联的<code>Data</code>对象</li></ul></li></ul></li><li><code>labelColor</code>：文字颜色</li><li><code>labelFont</code>：文字字体</li><li><code>series</code>：系列，以<code>Array</code>数组的方式指定每个系列的数值和颜色等信息<ul><li><code>values</code>：<code>Array</code>类型数组，存储<code>number</code>类型数值</li><li><code>colors</code>：<code>Array</code>类型数组，存储<code>string</code>类型颜色</li><li><code>color</code>：颜色值，其优先级低于<code>colors</code></li></ul></li><li><code>maxValue</code>：最大值，如果未设置则系统自动计算调整</li></ul>

<p><iframe src="examples/example_stackedcolumnchart.html" style="height:440px"></iframe></p>

<div id="ref_percentagecolumnchart"></div>

<h4>百分比柱状图</h4>

<p>百分比柱状图类型为<code>percentageColumnChart</code>：</p>

<ul><li><code>label</code>：是否显示文字信息：<ul><li><code>boolean</code>类型：为<code>true</code>显示<code>value</code>信息，<code>false</code>不显示</li><li><code>function</code>类型：<code>function(value, index, serie, data)</code>，函数返回需要显示的文字<ul><li><code>value</code>：当前数值</li><li><code>index</code>：当前索引</li><li><code>serie</code>：当前系列</li><li><code>data</code>：当前关联的<code>Data</code>对象</li></ul></li></ul></li><li><code>labelColor</code>：文字颜色</li><li><code>labelFont</code>：文字字体</li><li><code>series</code>：系列，以<code>Array</code>数组的方式指定每个系列的数值和颜色等信息<ul><li><code>values</code>：<code>Array</code>类型数组，存储<code>number</code>类型数值</li><li><code>colors</code>：<code>Array</code>类型数组，存储<code>string</code>类型颜色</li><li><code>color</code>：颜色值，其优先级低于<code>colors</code></li></ul></li></ul>

<p><iframe src="examples/example_percentagecolumnchart.html" style="height:440px"></iframe></p>

<div id="ref_linechart"></div>

<h4>曲线图</h4>

<p>曲线图类型为<code>lineChart</code>：</p>

<ul><li><code>label</code>：是否显示文字信息：<ul><li><code>boolean</code>类型：为<code>true</code>显示<code>value</code>信息，<code>false</code>不显示</li><li><code>function</code>类型：<code>function(value, index, serie, data)</code>，函数返回需要显示的文字<ul><li><code>value</code>：当前数值</li><li><code>index</code>：当前索引</li><li><code>serie</code>：当前系列</li><li><code>data</code>：当前关联的<code>Data</code>对象</li></ul></li></ul></li><li><code>labelColor</code>：文字颜色</li><li><code>labelFont</code>：文字字体</li><li><code>series</code>：系列，以<code>Array</code>数组的方式指定每个系列的数值和颜色等信息<ul><li><code>values</code>：<code>Array</code>类型数组，存储<code>number</code>类型数值</li><li><code>colors</code>：<code>Array</code>类型数组，存储<code>string</code>类型颜色</li><li><code>color</code>：颜色值，其优先级低于<code>colors</code></li></ul></li><li><code>minValue</code>：最小值，如果未设置默认为<code>0</code></li><li><code>maxValue</code>：最大值，如果未设置则系统自动计算调整</li><li><code>linePoint</code>：绘制拐点效果：<ul><li><code>boolean</code>类型：为<code>true</code>显示圆形观点信息，<code>false</code>不显示</li><li><code>function</code>类型：<code>function(g, x, y, color, index, serie, data)</code>，函数内绘制拐点效果<ul><li><code>g</code>：画笔</li><li><code>x</code>：当前拐点横坐标</li><li><code>y</code>：当前拐点纵坐标</li><li><code>color</code>：当前系列线颜色</li><li><code>index</code>：当前值索引</li><li><code>serie</code>：当前系列</li><li><code>data</code>：当前关联<code>Data</code>对象</li></ul></li></ul></li><li><code>lineWidth</code>：线宽度，默认为<code>2</code></li><li><code>line3d</code>：是否呈现<code>3d</code>线效果</li></ul>

<p><iframe src="examples/example_linechart.html" style="height:440px"></iframe></p>

<h4>自定义</h4>

<div id="ref_custom"></div>

<p>除了<code>HT</code>预定义的组件类型外，用户还可以自定义扩展类型，自定义有两种方式：</p>

<ul><li>直接将<code>type</code>值设置成绘制函数：<code>function(g, rect, comp, data, view){}</code></li><li>通过<code>ht.Default.setCompType(name, funtion(g, rect, comp, data, view){})</code>注册组件类型，矢量<code>type</code>值设置成相应的注册名</li></ul>

<p>先注册<code>ht.Default.setCompType</code>的方式有利于数据模型存储序列化，同时也有利于复用。</p>

<p>以下示例自定义了一个时钟，该时钟的矢量由三部分组成：</p>

<ul><li>第一个组件采用的是预定义的<code>circle</code>类型，绘制了圆形的黄色渐进背景作为底盘</li><li>第二个组件自定义了<code>type</code>为<code>clock-face</code>的类型，绘制了时钟的<code>60</code>个边缘刻度</li><li>第三个组件直接将<code>type</code>设置为绘制函数，根据<code>data.a(&#39;date&#39;)</code>上的时间信息绘制了时、分和秒针</li></ul>

<p><iframe src="examples/example_clock.html" style="height:300px"></iframe></p>

<pre><code>ht.Default.setCompType(&#39;clock-face&#39;, function(g, rect, comp, data, view) {
    var cx = rect.x + rect.width / 2;
    var cy = rect.y + rect.height / 2;
    var theta = 0;
    var r = Math.min(rect.width, rect.height)/2 * 0.92;

    g.strokeStyle = &quot;#137&quot;;
    for (var i = 0; i &lt; 60; i++) {                        
        g.beginPath();
        g.arc(
            cx + Math.cos(theta) * r, 
            cy + Math.sin(theta) * r, 
            i % 5 === 0 ? 4 : 1, 
            0, Math.PI * 2, true);
        g.closePath();
        g.lineWidth = i % 5 === 0 ? 2 : 1;
        g.stroke();
        theta = theta + (6 * Math.PI / 180);
    }
});</code></pre>

<p><code>ht.Default.setCompType</code>提供<code>Canvas</code>的画笔供开发人员操作，同时避免了重写<code>UI</code>的尴尬，结合动画可以实现多彩绚烂的效果：</p>

<p><iframe src="examples/example_bubble.html" style="height:200px"></iframe></p>

<div id="ref_svgpath"></div>

<h4>SVGPath</h4>

<p><code>SVGPath</code>类型，<a href="#ref_basic">基本类型</a>的参数也都适用于SVG路径，通过<code>path</code>指定符合<code>SVG</code>规范的路径信息，
<code>path</code>的格式请参考<a href="http://www.w3.org/TR/SVG/paths.html">这里</a>
<code>SVGPath</code>类型在绘制时要进行大量的解析工作，所以应该避免大量使用这种类型，尤其是在对性能敏感的场景中。
<iframe src="examples/example_svgpath.html" style="height:180px"></iframe></p>

<div id="ref_binding"></div>

<h3>数据绑定</h3>

<p>详见<a href="../databinding/ht-databinding-guide.html">数据绑定手册</a></p>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
